<template>
	<view class="userinfo">
		<!-- 		<image :src="avatar" mode="" class="avatar"></image>
		<view class="username">{{username}}</view> -->
		<image :src="obj.avatar" mode="" class="avatar"></image>
		<view>{{obj.name}}</view>
	</view>
</template>
<script setup>
	import {
		computed
	} from "vue";
	// const props = defineProps(['username', 'avatar'])
	//从父接收值
	//第二种写法格式
	// const props = defineProps({
	// 	username: {
	// 		type: String,
	// 		default: "匿名",
	// 	},
	// 	avatar: {
	// 		type:String,
	// 		default: "../../static/logo.png",
	// 	}
	// })

	// console.log(props.username)
	// const myname=computed(()=>props.username + "@")
	// const props = 
	defineProps({
		obj: {
			type: Object,
			default () {
				return {
					name: "匿名",
					avater: "../../static/logo.png"
				}
			}
		}
	})
</script>
<style lang="scss" scoped>
	.userinfo {
		width: 100%;
		height: 200px;
		background-color: #ccc;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		image {
			width: 100px;
			height: 100px;
			border-radius: 50%;
		}

		.usename {
			padding: 10px;
			font-size: 20px;
		}
	}
</style>